<template>
   <div class="person-detail-container">
      <BaseDescription :labels="personInfoLabels" :data="data" />
      <span class="person-detail-card-title"><b>工作经历</b></span>
      <el-table ref="orderTable" :data="companies" style="width: 100%;" v-loading="listLoading" border>
         <el-table-column v-for="(item, index) in compamyColumn" :label="item.name" :key="index" :width="item.width"
            :align="item.align">
            <template slot-scope="scope">{{ item.render ? item.render(scope.row[item.key], scope.row) : scope.row[item.key]
            }}
            </template>
         </el-table-column>
         <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
               <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">投资案例</el-button>
               <!-- <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">详情</el-button> -->
            </template>
         </el-table-column>
      </el-table>
      <span class="person-detail-card-title"><b>教育经历</b></span>
      <el-table ref="orderTable" :data="schools" style="width: 100%;" v-loading="listLoading" border>
         <el-table-column v-for="(item, index) in schoolColumn" :label="item.name" :key="index" :width="item.width"
            :align="item.align">
            <template slot-scope="scope">{{ item.render ? item.render(scope.row[item.key], scope.row) : scope.row[item.key]
            }}
            </template>
         </el-table-column>
         <!-- <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
               <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">详情</el-button>
            </template>
         </el-table-column> -->
      </el-table>
   </div>
</template>
<script>
import BaseDescription from '@/components/baseDescription.vue';
import { getPersonHistory, getPersonsDetail } from '@/api/persons.js'

import { renderDateRange } from '@/utils/date.js'


const personInfoLabels = [
   {
      name: '中文名',
      key: 'name',
   }, {
      name: '英文名',
      key: 'englishName',
   }, {
      name: '成长经历',
      key: 'background',
   }, {
      name: '朋友',
      key: 'friends',
   }, {
      name: '第三方',
      key: 'thirdParty',
   }, {
      name: '投资风格',
      key: 'style',
   },
]
const compamyColumn = [
   {
      name: '公司名称',
      key: 'companyName',
   }, {
      name: '在职状态',
      key: 'endTime',
      render: val => {
         return val ? '离职' : '在职'
      }
   }, {
      name: '职位',
      key: 'position',
   }, {
      name: '在职时间',
      key: 'name',
      render: (val, row) => {
         return renderDateRange(row.startTime, row.endTime)
      }
   }, {
      name: '地点',
      key: 'locations',
   }, {
      name: '上司',
      key: 'supervisorName',
   }, {
      name: '下属',
      key: 'subordinate',
   }, {
      name: '同事',
      key: 'peers',
   }, {
      name: '工作内容',
      key: 'jobContent',
   },
]
const schoolColumn = [
   {
      name: '学校名称',
      key: 'school',
   }, {
      name: '专业',
      key: 'major',
   }, {
      name: '学习时间',
      key: 'name',
      render: (val, row) => {
         return renderDateRange(row.startTime, row.endTime)
      }
   }, {
      name: '地点',
      key: 'locations',
   }, {
      name: '学习情况',
      key: 'studyStatus',
   }, {
      name: '同学',
      key: 'classmates',
   },]
export default {
   name: '',
   components: {
      BaseDescription
   },
   mixins: [],
   props: {

   },
   data() {
      return {
         compamyColumn: compamyColumn,
         schoolColumn: schoolColumn,
         companies: [],
         schools: [],
         listLoading: false,
         personInfoLabels: personInfoLabels,
         data: {}
      }
   },
   mounted() {
      const id = this.$route.query.id
      getPersonsDetail({ id: id }).then(res => {
         this.data = res.data;
      })
      getPersonHistory({ personId: id }).then(res => {
         this.companies = res.data.companyHistory;
         this.schools = res.data.schoolHistory
      })
   },
   methods: {

   }
};
</script>
<style lang='scss' scoped>
.person-detail-container {
   padding: 10px;
}

.person-detail-card-title {
   padding: 10px 0;
   display: block;
}
</style>